<template>
  <QfPage title="kfc业务页面">
    <a-cascader
      v-model:value="value"
      style="width: 100%"
      multiple
      max-tag-count="responsive"
      :options="options"
      placeholder="Please select"
      @change="fn1"
    ></a-cascader>

    <!-- 头部操作按钮 -->
    <template #hd>
      <a-button type="primary" @click="visible = true">新增</a-button>
      <a-input v-model:value="keyword" placeholder="按照a的值来搜索" />
    </template>

    <a-table :dataSource="dataSource" :columns="columns">
      <template #bodyCell="{ record, column }">
        <!-- 判断如何是 key等于 action的时候 就按照下面的模板的内容来显示 -->
        <template v-if="column.key === 'action'">
          <a-button @click="handleEdit(record)">编辑</a-button>
          <a-button @click="handleDel(record.id)">删除</a-button>
        </template>
      </template>
    </a-table>
    <template #ft>
      <div>本项目由千锋2208班出品</div>
    </template>

    <!-- 添加的弹框 -->
    <a-modal v-model:visible="visible" title="abc" @ok="handleOk">
      <a-form :model="newKfc" ref="myform">
        <a-form-item label="a" name="a">
          <a-input v-model:value="newKfc.a" />
        </a-form-item>
        <a-form-item label="b" name="b">
          <a-input v-model:value="newKfc.b" />
        </a-form-item>
        <a-form-item label="c" name="c">
          <a-input v-model:value="newKfc.c" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 编辑的抽屉 -->
    <a-drawer v-model:visible="showEdit">
      <a-form :model="editKfc">
        <a-form-item label="a" name="a">
          <a-input v-model:value="editKfc.a" />
        </a-form-item>
        <a-form-item label="b" name="b">
          <a-input v-model:value="editKfc.b" />
        </a-form-item>
        <a-form-item label="c" name="c">
          <a-input v-model:value="editKfc.c" />
        </a-form-item>
      </a-form>
      <a-button @click="comfirmEdit">确定修改</a-button>
    </a-drawer>
  </QfPage>
</template>
<script>
import { defineComponent } from 'vue';
import axios from 'axios';
import { message, Modal } from 'ant-design-vue';
import dayjs from 'dayjs';
import _ from 'lodash';
import { getKfcList, addKfc } from '@/api/kfc';

const options = [
  {
    label: 'Light',
    value: 'light',
    children: new Array(20)
      .fill(null)
      .map((a, index) => ({ label: `Number ${index}`, value: index })),
  },
  {
    label: 'Bamboo',
    value: 'bamboo',
    children: [
      {
        label: 'Toy Fish',
        value: 'fish',
      },
      {
        label: 'Toy Cards',
        value: 'cards',
      },
      {
        label: 'Toy Bird',
        value: 'bird',
      },
    ],
  },
];

export default defineComponent({
  data() {
    return {
      options,
      value: [],
      keyword: '',
      editId: null,
      showEdit: false,
      visible: false,
      dataSource: [],
      newKfc: {
        a: '',
        b: '',
        c: '',
      },
      editKfc: {
        a: '',
        b: '',
        c: '',
      },
      columns: [
        {
          title: 'id', // 表头文字内容
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: 'a字段',
          dataIndex: 'a',
          key: 'a',
          align: 'center',
        },
        {
          title: 'b字段',
          dataIndex: 'b',
          key: 'b',
        },
        {
          title: 'c字段',
          dataIndex: 'c',
          key: 'c',
        },
        {
          title: '创建时间',
          dataIndex: 'createdAt',
          key: 'createdAt',
          customRender({ record }) {
            const newdayjs = dayjs(record.createdAt); // 得到一个dayjs对象
            return newdayjs.format('YYYY-MM-DD HH:mm:ss');
          },
        },
        {
          title: '操作',
          key: 'action',
        },
      ],
    };
  },
  created() {
    // 执行获取页面数据的请求
    this.getData();
  },
  watch: {
    keyword() {
      // 如果搜索关键字有变化的时候  重新去获取页面内容
      this.getData();
    },
  },
  methods: {
    fn1(val, arg2) {
      console.log('val', val);
    },
    async handleDel(id) {
      console.log('id', id);
      // 提醒用户进行删除的二次确认
      Modal.confirm({
        title: 'Do you Want to delete these items?',
        content: '确定了？不后悔？一次机会都不给了？？？',
        onOk: async () => {
          const res = await axios.delete(`http://localhost:3030/kfc/${id}`, {
            headers: {
              Authorization:
                'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6ImFjY2VzcyJ9.eyJpYXQiOjE2NzA4MTEzMTksImV4cCI6MTY3MDg5NzcxOSwiYXVkIjoiaHR0cHM6Ly95b3VyZG9tYWluLmNvbSIsImlzcyI6ImZlYXRoZXJzIiwic3ViIjoiMiIsImp0aSI6IjZmNDc5ZmJmLTNkMTMtNDM0ZC05YTZhLTQ0OGQ2MzA4MDhmZSJ9.mtaL00qEiyBJ_s9hVXOFAgLsz6bbYPt_UZQsFDZm8wU',
            },
          });
          console.log('删除的结果 ', res);
          const { status } = res;
          if (status !== 200) return message.warning('删除失败');
          message.success('删除成功');
          return this.getData();
        },
        onCancel() {
          console.log('Cancel');
        },
        class: 'test',
      });
    },
    async comfirmEdit() {
      const res = await axios.put(
        `http://localhost:3030/kfc/${this.editId}`,
        {
          ...this.editKfc,
        },
        {
          headers: {
            Authorization:
              'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6ImFjY2VzcyJ9.eyJpYXQiOjE2NzA4MTEzMTksImV4cCI6MTY3MDg5NzcxOSwiYXVkIjoiaHR0cHM6Ly95b3VyZG9tYWluLmNvbSIsImlzcyI6ImZlYXRoZXJzIiwic3ViIjoiMiIsImp0aSI6IjZmNDc5ZmJmLTNkMTMtNDM0ZC05YTZhLTQ0OGQ2MzA4MDhmZSJ9.mtaL00qEiyBJ_s9hVXOFAgLsz6bbYPt_UZQsFDZm8wU',
          },
        },
      );
      const { status } = res;
      if (status !== 200) return message.warning('修改失败');
      message.success('修改成功');
      this.getData();
      this.showEdit = false;
      return true;
    },
    handleEdit(record) {
      // 记录要编辑的 id
      this.editId = record.id;
      // 显示抽屉
      this.showEdit = true;
      // 设置编辑表单的内容等于当前行的数据
      const {
        id, createdAt, updatedAt, ...rest
      } = record;
      this.editKfc = rest;
    },
    async handleOk() {
      // 先获取要请求的数据
      const res = await addKfc(this.newKfc);
      console.log('添加请求的结果res', res);
      const { status } = res;
      if (status !== 201) return message.warning('添加失败');
      message.success('添加成功');
      this.$refs.myform.resetFields(); // 清空表单
      this.visible = false; // 关闭弹窗
      this.getData(); // 重新获取页面数据
      return true;
    },
    // 获取数据的时候需要考虑频繁触发的情况
    getData: _.debounce(async function () {
      const res = await getKfcList({ keyword: this.keyword });
      console.log('res', res);
      const { status, data } = res;
      // 在请求成功得到内容之后 修改表格的数据源
      if (status === 200) {
        this.dataSource = data.data;
      }
    }, 300),
  },
});
</script>
